import Qt 4.7
import QtMobility.gallery 1.1

Rectangle {
    id: wholeBody
    width: 200; height: 200
    Rectangle {
        id: splashBlock
        width: wholeBody.width
        height: wholeBody.height
        color: "blue"
        state:  "middle"
        states: [
            State {
                name: "middle"
                PropertyChanges { target: splashBlock; x: 0 }
            },
            State {
                name: "left"
                PropertyChanges { target: splashBlock; x: 0 - wholeBody.width }
            }
        ]
        transitions: Transition {
            PropertyAnimation { duration: 400; properties: "x"; easing.type: Easing.Linear }
        }
        Text {
            id: titleText
            anchors.top: splashBlock.top
            anchors.topMargin: 10
            anchors.horizontalCenter: splashBlock.horizontalCenter
            text: "MeasureMee"
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 25
        }
        Text {
            id: creditText
            anchors.bottom: splashBlock.bottom
            anchors.bottomMargin: 2
            anchors.horizontalCenter: splashBlock.horizontalCenter
            text: "Wade Shull<br />Mu Studios<br />http://www.mustudios.com - http://blogofmu.com"
            font.pointSize: 12
            color: "white"
            horizontalAlignment: Text.AlignHCenter
        }
        Image {
            id: measureMeeLogo
            width: 275
            height: 275
            anchors.verticalCenter: splashBlock.verticalCenter
            anchors.horizontalCenter: splashBlock.horizontalCenter
            source: "measuremeelogo.jpg"
        }
        Rectangle {
            id: loadingBlock
            width: loadingText.width + 14
            height: loadingText.height + 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.top: parent.top
            anchors.topMargin: 60
            smooth: true
            radius: 5
            color: "grey"
            opacity: 0.9
            Text {
                id: loadingText
                anchors.left: parent.left
                anchors.leftMargin: 7
                anchors.top: parent.top
                anchors.topMargin: 2.5
                text: "Loading..."
            }
        }
        Timer {
            interval: 1000
            repeat: false
            running: true
            onTriggered: { splashBlock.state = "left"; fileGridView.state = "middle" }
        }
    }
    DocumentGalleryModel {
        id: imageModel
        rootType: DocumentGallery.Image
        properties: [ "url" ]
        filter: GalleryWildcardFilter {
            property: "fileName";
            value: "*.jpg";
        }
    }

    Component {
        id: fileDelegate
        Rectangle {
            id: fileDelegateBlock
            width: 150; height: 150
            Image {
                id: fileDelegateImage
                width: 150; height: 150
                sourceSize.width: 150; sourceSize.height: 150
                anchors.top: fileDelegateBlock.top
                source: url
            }
            MouseArea {
                id: fileDelegateArea
                anchors.fill: parent
                onClicked: { flipContainer.flipped = !flipContainer.flipped; measureMeeImage.source = url }
            }
        }
    }
    Flipable {
        id: flipContainer
        width: wholeBody.width
        height: wholeBody.height
        property bool flipped: false
        property bool main: false

        transform: Rotation {
            id: rotation
            origin.x: flipContainer.width/2
            origin.y: flipContainer.height/2
            axis.x: 0; axis.y: 1; axis.z: 0
            angle: 0
        }

        states: [
            State {
                name: "back"
                PropertyChanges { target: rotation; angle: 180 }
                when: flipContainer.flipped
            }
        ]

        transitions: [
            Transition {
                NumberAnimation { target: rotation; property: "angle"; easing.type: Easing.InSine; duration: 1000 }
            }
        ]
        front: GridView {
            id: fileGridView
            width: wholeBody.width; height: wholeBody.height
            cellWidth: 155; cellHeight: 155
            model: imageModel
            state: "right"
            currentIndex: imageModel.count - 1
            states: [
                State {
                    name: "right"
                    PropertyChanges { target: fileGridView; x: ( 0 + wholeBody.width ) }
                },
                State {
                    name: "middle"
                    PropertyChanges { target: fileGridView; x: 0 }
                }
            ]
            transitions: Transition {
                PropertyAnimation { duration: 400; properties: "x"; easing.type: Easing.Linear }
            }
            delegate: fileDelegate
//            Rectangle {
//                id: scrollbar
//                anchors.right: fileGridView.right
//                y: fileGridView.visibleArea.yPosition * fileGridView.height
//                onYChanged: { console.log (imageModel.count) }
//                width: 10
//                height: fileGridView.visibleArea.heightRatio * fileGridView.height
//                color: "blue"
//            }

        }

        back: Rectangle {
            id: measureMeeBlock
            width: wholeBody.width
            height: wholeBody.height
            state: "middle"
            states: [
                State {
                    name: "middle"
                    PropertyChanges { target: measureMeeBlock; x: 0 }
                },
                State {
                    name: "left"
                    PropertyChanges { target: measureMeeBlock; x: 0 + wholeBody.width }
                }
            ]
            transitions: Transition {
                PropertyAnimation { duration: 400; properties: "x"; easing.type: Easing.Linear }
            }
            Image {
                id: measureMeeImage
                width: measureMeeBlock.width
                height: measureMeeBlock.height
                fillMode: Image.PreserveAspectFit
                source: ""
            }
            Rectangle {
                id: selectorBlock
                width: 300
                height: reference1Block.height + reference2Block.height + item1Block.height + item2Block.height + backtoPicturesBlock.height
                state: "shown"
                color: "white"
                border.color: "black"
                z: 2
                opacity: 1
                states: [
                    State {
                        name: "shown"
                        PropertyChanges {
                            target: selectorBlock
                            x: 0; y: 0
                        }
                    },
                    State {
                        name: "hidden"
                        PropertyChanges {
                            target: selectorBlock
                            x: 0
                            y: 0 - selectorBlock.height
                        }
                    }
                ]
                transitions: [
                    Transition {
                        PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
                    }
                ]
                Rectangle {
                    id: reference1Block
                    width: selectorBlock.width
                    height: reference1Text.height
                    anchors.top: selectorBlock.top
                    anchors.left: selectorBlock.left
                    color: "white"
                    border.color: "black"
                    Text {
                        id: reference1Text
                        text: "Select Reference Point 1"
                        anchors.top: reference1Block.top
                        anchors.left: reference1Block.left
                        width: selectorBlock.width
                        wrapMode: Text.WordWrap
                    }
                    MouseArea {
                        id: reference1Selector
                        anchors.fill: parent
                        onClicked: { reference1Area.visible = true; selectorBlock.state = "hidden"; measurementBlock.state = "hidden"; reference1Point.visible = false }
                    }
                }
                Rectangle {
                    id: reference2Block
                    width: selectorBlock.width
                    height: reference2Text.height
                    anchors.top: reference1Block.bottom
                    anchors.left: selectorBlock.left
                    color: "white"
                    border.color: "black"
                    Text {
                        id: reference2Text
                        text: "Select Reference Point 2"
                        anchors.top: reference2Block.top
                        anchors.left: reference2Block.left
                        width: selectorBlock.width
                        wrapMode: Text.WordWrap
                    }
                    MouseArea {
                        id: reference2Selector
                        anchors.fill: parent
                        onClicked: { reference2Area.visible = true; selectorBlock.state = "hidden"; measurementBlock.state = "hidden"; reference2Point.visible = false }
                    }
                }
                Rectangle {
                    id: item1Block
                    width: selectorBlock.width
                    height: item1Text.height
                    anchors.top: reference2Block.bottom
                    anchors.left: selectorBlock.left
                    color: "white"
                    border.color: "black"
                    Text {
                        id: item1Text
                        text: "Select Item Point 1"
                        anchors.top: item1Block.top
                        anchors.left: item1Block.left
                        width: selectorBlock.width
                        wrapMode: Text.WordWrap
                    }
                    MouseArea {
                        id: item1Selector
                        anchors.fill: parent
                        onClicked: { item1Area.visible = true; selectorBlock.state = "hidden"; measurementBlock.state = "hidden"; item1Point.visible = false }
                    }
                }
                Rectangle {
                    id: item2Block
                    width: selectorBlock.width
                    height: item2Text.height
                    anchors.top: item1Block.bottom
                    anchors.left: selectorBlock.left
                    color: "white"
                    border.color: "black"
                    Text {
                        id: item2Text
                        text: "Select Item Point 2"
                        anchors.top: item2Block.top
                        anchors.left: item2Block.left
                        width: selectorBlock.width
                        wrapMode: Text.WordWrap
                    }
                    MouseArea {
                        id: item2Selector
                        anchors.fill: parent
                        onClicked: { item2Area.visible = true; selectorBlock.state = "hidden"; measurementBlock.state = "hidden"; item2Point.visible = false }
                    }
                }
                Rectangle {
                    id: backtoPicturesBlock
                    width: selectorBlock.width
                    height: backtoPicturesText.height
                    anchors.top: item2Block.bottom
                    anchors.left: selectorBlock.left
                    color: "white"
                    border.color:  "black"
                    Text {
                        id: backtoPicturesText
                        text: "Back to Pictures"
                        anchors.left: backtoPicturesBlock.left
                        width: selectorBlock.width
                        wrapMode: Text.WordWrap
                    }
                    MouseArea {
                        id: backtoPicturesArea
                        anchors.fill: parent
                        onClicked: { flipContainer.flipped = !flipContainer.flipped; referenceSizeInput.text = ""; reference1Point.visible = false; reference2Point.visible = false; item1Point.visible = false; item2Point.visible = false }
                    }
                }
            }
            Rectangle {
                id: measurementBlock
                width: 300
                height: getReferenceLength.height + itemLengthBlock.height + aboutSelectorBlock.height
                state: "shown"
                color: "white"
                border.color: "black"
                states: [
                    State {
                        name: "shown"
                        PropertyChanges {
                            target: measurementBlock
                            x: 0
                            y: wholeBody.height - measurementBlock.height
                        }
                    },
                    State {
                        name: "hidden"
                        PropertyChanges {
                            target: measurementBlock
                            x: 0
                            y: wholeBody.height
                        }
                    }
                ]
                transitions: [
                    Transition {
                        PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
                    }
                ]
                Rectangle {
                    id: getReferenceLength
                    width: 300
                    height: getReferenceText.height + referenceSizeBlock.height + 5
                    anchors.top: measurementBlock.top
                    anchors.right: measurementBlock.right
                    color: "white"
                    border.color: "black"
                    Text {
                        id: getReferenceText
                        text: "Input Reference Length"
                        width: parent.width
                        anchors.top: getReferenceLength.top
                        anchors.left: getReferenceLength.left
                        wrapMode: Text.WordWrap
                    }
                    Rectangle {
                        id: referenceSizeBlock
                        anchors.top: getReferenceText.bottom
                        width: parent.width - 10
                        height: 30
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        border.color: "black"
                        smooth: true
                        radius: 3
                        TextInput {
                            id: referenceSizeInput
                            anchors.left: parent.left
                            anchors.leftMargin: 3
                            width: parent.width
                            focus: true
                        }
                    }
                }
                Rectangle {
                    id: itemLengthBlock
                    width: 300
                    height: itemLengthText.height
                    anchors.top: getReferenceLength.bottom
                    anchors.right: measurementBlock.right
                    color: "white"
                    border.color: "black"
                    Text {
                        id: itemLengthText
                        anchors.top: parent.top
                        anchors.left: parent.left
                        text: "Item Length : "
                        wrapMode: Text.WordWrap
                    }
                    Text {
                        id: itemCalculatedLengthText
                        property real itemLengthCalc: Math.floor(referenceSizeInput.text * Math.sqrt((itemXLength*itemXLength) + (itemYLength*itemYLength)) / Math.sqrt((referenceXLength*referenceXLength) + (referenceYLength*referenceYLength)))
                        property real itemXLength: Math.floor(item2Point.item2PointX - item1Point.item1PointX)
                        property real itemYLength: Math.floor(item2Point.item2PointY - item1Point.item1PointY)
                        property real referenceXLength: Math.floor(reference2Point.reference2PointX - reference1Point.reference1PointX)
                        property real referenceYLength: Math.floor(reference2Point.reference2PointY - reference1Point.reference1PointY)
                        width: parent.width
                        anchors.top: parent.top
                        anchors.left: itemLengthText.right
                        text:  reference1Point.reference1PointSet == true && reference2Point.reference2PointSet == true ? itemLengthCalc : "0"
                    }
                }
                Rectangle {
                    id: aboutSelectorBlock
                    width: 300
                    height: aboutSelectorText.height
                    anchors.top: itemLengthBlock.bottom
                    anchors.right: measurementBlock.right
                    color: "white"
                    border.color: "black"
                    Text {
                        id: aboutSelectorText
                        width: parent.width
                        anchors.top: parent.top
                        anchors.left: parent.left
                        text: "About"

                    }
                    MouseArea {
                        id: aboutSelectorArea
                        anchors.fill: parent
                        onClicked: { /*aboutBlock.visible = true; measureMeeBlock.visible = false*/aboutBlock.state = "middle"; measureMeeBlock.state = "left" }
                    }
                }
            }
            MouseArea {
                id: reference1Area
                anchors.fill: measureMeeBlock
                onPressed: { reference1Point.visible = true; reference1Point.reference1PointX = mouseX; reference1Point.reference1PointY = mouseY }
                onPositionChanged: { reference1Point.reference1PointX = mouseX; reference1Point.reference1PointY = mouseY }
                onClicked: { reference1Area.visible = false; reference1Point.visible = true; reference1Point.reference1PointX = mouseX; reference1Point.reference1PointY = mouseY; selectorBlock.state = "shown"; measurementBlock.state = "shown"; reference1Point.reference1PointSet = true }
                visible: false
            }
            MouseArea {
                id: reference2Area
                anchors.fill: measureMeeBlock
                onPressed: { reference2Point.visible = true; reference2Point.reference2PointX = mouseX; reference2Point.reference2PointY = mouseY }
                onPositionChanged: { reference2Point.reference2PointX = mouseX; reference2Point.reference2PointY = mouseY }
                onClicked: { reference2Area.visible = false; reference2Point.visible = true; reference2Point.reference2PointX = mouseX; reference2Point.reference2PointY = mouseY; selectorBlock.state = "shown"; measurementBlock.state = "shown"; reference2Point.reference2PointSet = true }
                visible: false
            }
            MouseArea {
                id: item1Area
                anchors.fill: measureMeeBlock
                onPressed: { item1Point.visible = true; item1Point.item1PointX = mouseX; item1Point.item1PointY = mouseY }
                onPositionChanged: { item1Point.item1PointX = mouseX; item1Point.item1PointY = mouseY }
                onClicked: { item1Area.visible = false; item1Point.visible = true; item1Point.item1PointX = mouseX; item1Point.item1PointY = mouseY; selectorBlock.state = "shown"; measurementBlock.state = "shown" }
                visible: false
            }
            MouseArea {
                id: item2Area
                anchors.fill: measureMeeBlock
                onPressed: { item2Point.visible = true; item2Point.item2PointX = mouseX; item2Point.item2PointY = mouseY }
                onPositionChanged: { item2Point.item2PointX = mouseX; item2Point.item2PointY = mouseY }
                onClicked: { item2Area.visible = false; item2Point.visible = true; item2Point.item2PointX = mouseX; item2Point.item2PointY = mouseY; selectorBlock.state = "shown"; measurementBlock.state = "shown" }
                visible: false
            }
            Rectangle {
                id: reference1Point
                property int reference1PointX: 0
                property int reference1PointY: 0
                property bool reference1PointSet: false
                width: 8; height: 8
                x: reference1PointX - 4; y: reference1PointY - 4
                color: "black"; border.color: "white"
                smooth: true; radius: 4
                visible: false
            }
            Rectangle {
                id: reference2Point
                property int reference2PointX: 0
                property int reference2PointY: 0
                property bool reference2PointSet: false
                width: 8; height: 8
                x: reference2PointX - 4; y: reference2PointY - 4
                color: "black"; border.color: "white"
                smooth: true; radius: 4
                visible: false
            }
            Rectangle {
                id: item1Point
                property int item1PointX: 0
                property int item1PointY: 0
                width: 8; height: 8
                x: item1PointX -4; y: item1PointY - 4
                color: "white"; border.color: "black"
                smooth: true; radius: 4
                visible: false
            }
            Rectangle {
                id: item2Point
                property int item2PointX: 0
                property int item2PointY: 0
                width: 8; height: 8
                x: item2PointX - 4; y: item2PointY - 4
                color: "white"; border.color: "black"
                smooth: true; radius: 4
                visible: false
            }
        }

    }
    Flickable {
        id: aboutBlock
        width: wholeBody.width; height: wholeBody.height
        contentWidth: wholeBody.width; contentHeight: aboutText.height
//        visible: false
        state: "right"
        states: [
            State {
                name: "middle"
                PropertyChanges { target: aboutBlock; x: 0 }
            },
            State {
                name: "right"
                 PropertyChanges { target: aboutBlock; x: 0 + wholeBody.width }
            }
        ]
        transitions: Transition {
            PropertyAnimation { duration: 400; properties: "x"; easing.type: Easing.Linear }
        }
        Text {
            id: aboutText
            width: aboutBlock.width
            text: "To measure the length of an object in a picture you must know the length of something else in the picture.  First select the two end of the reference item with known length.  Input the length of that item.  Don't worry about units.  If it is 12 inches, just enter 12.  Next pick the two end points of the item you want to know the length of.  The approximate length will be calculated.  This should only be used as a reference.  The calculated length will only be as good as the picture and the point of view of the object.  Again, this is only for approximate length.  Click any text to go back to your picture."
            wrapMode: Text.WordWrap
        }
        MouseArea {
            id: aboutBlockExit
            width: parent.width; height: parent.height
            anchors.fill: parent
            onClicked: { /*aboutBlock.visible = false; measureMeeBlock.visible = true*/aboutBlock.state = "right"; measureMeeBlock.state = "middle" }
        }
    }
}

